<template>
	<view class="box_fooder">
		<navigator url="../../pages/atlas/atlas">
			<image class="cleaning_imgBox" src="../../static/images/lrx/chargedetail@3x.png"></image>
		</navigator>
		<view class="cleaning_box">
			<view class="cleaning_bt">
				八大汽车清洗馆
			</view>
			<view>营业时间：<text>8:30~18:30</text></view>
			<view class="cleaning_bq">
				免费wifi
			</view>
			<view class="cleaning_zx"></view>
			<view class="cleaning_wz">
				<view class="cleaning_dz">
					<view>成都高兴区天河路4/8号一层5号</view>
					<view class="cleaning_jl">
						距离您5.8km
					</view>
				</view>
				<view class="cleaning_box5">
					<image class="factory_tb" src="../../static/icons/ymy/icon_dt.png"></image>
					<view class="factory_text2">地图</view>
				</view>
				<view class="cleaning_box5">
					<image class="factory_tb" src="../../static/icons/ymy/icon_sj.png"></image>
					<view class="factory_text2">电话</view>
				</view>
			</view>
		</view>
		<view class="factoru_qh">
			<view class="factory_box2">
				<view class="factory_box3">
					<text class="factoru_text_bt">保养总体星级</text>
					<view class="box_img">
						<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png"></image>
						<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png"></image>
						<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png"></image>
						<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png"></image>
					</view>
				</view>
				<view class="red">5.00</view>
			</view>
			<view class="factoru_zx"></view>
			<view class="factoru_text_bt">商家店铺信誉</view>
			<view>
				<view class="text_fw">服务态度 5.00</view>
			</view>
			<view class="factoru_zx"></view>
			<view>内容评价</view>
			<view>
				<!-- 上面动态切换 -->
				<view class="title-view">
					<text :class="{buttonActive: switchBtnTab ===0}" @click="switchCurve(0)" class="iten">
						全部
					</text>
					<text :class="{buttonActive: switchBtnTab ===1}" @click="switchCurve(1)" class="iten">
						好评
					</text>
					<text :class="{buttonActive: switchBtnTab ===2}" @click="switchCurve(2)" class="iten">
						中评
					</text>
					<text :class="{buttonActive: switchBtnTab ===3}" @click="switchCurve(3)" class="iten">
						差评
					</text>
				</view>

				<!-- 下面滑块 -->
				<view class="foder_box">
					<view class="text" v-show="switchBtnTab == 0">
						<view v-for="item in swiper" :key="item">
							<view v-if="item.state == 1" class="item">
								<view class="factory_box1">
									<view class="factoru_txbox">
										<image class="factoru_tx" src="../../static/images/ymy/A31/image_home.png">
										</image>
										<view class="factoru_txbox1">
											<view class="factoru_txbox2">
												<text class="factoru_name">走路的橘子</text>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
											</view>
											<text class="factory_text1">金美孚1号 NS级</text>
										</view>
									</view>
									<view>技师和前天都很热情，店面干净整洁</view>
									<view class="factory_rq">2021/01/21</view>
									<view class="cleaning_zx"></view>
								</view>
							</view>
							<view v-if="item.state == 2" class="item">
								<view class="factory_box1">
									<view class="factoru_txbox">
										<image class="factoru_tx" src="../../static/images/ymy/A31/image_home.png">
										</image>
										<view class="factoru_txbox1">
											<view class="factoru_txbox2">
												<text class="factoru_name">走路的橘子</text>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
											</view>
											<text class="factory_text1">金美孚1号 NS级</text>
										</view>
									</view>
									<view>技师和前天都很热情，店面干净整洁</view>
									<view class="factory_rq">2021/01/21</view>
									<view class="cleaning_zx"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="text" v-show="switchBtnTab == 1">
						<view v-for="item in swiper" :key="item">
							<view class="item">
								<view class="factory_box1">
									<view class="factoru_txbox">
										<image class="factoru_tx" src="../../static/images/ymy/A31/image_home.png">
										</image>
										<view class="factoru_txbox1">
											<view class="factoru_txbox2">
												<text class="factoru_name">走路的橘子</text>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
											</view>
											<text class="factory_text1">金美孚1号 NS级</text>
										</view>
									</view>
									<view>技师和前天都很热情，店面干净整洁</view>
									<view class="factory_rq">2021/01/21</view>
									<view class="cleaning_zx"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="text" v-show="switchBtnTab == 2">
						<view v-for="item in swiper" :key="item">
							<view class="item">
								<view class="factory_box1">
									<view class="factoru_txbox">
										<image class="factoru_tx" src="../../static/images/ymy/A31/image_home.png">
										</image>
										<view class="factoru_txbox1">
											<view class="factoru_txbox2">
												<text class="factoru_name">走路的橘子</text>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
											</view>
											<text class="factory_text1">金美孚1号 NS级</text>
										</view>
									</view>
									<view>技师和前天都很热情，店面干净整洁</view>
									<view class="factory_rq">2021/01/21</view>
									<view class="cleaning_zx"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="text" v-show="switchBtnTab == 3">
						<view v-for="item in swiper" :key="item">
							<view class="item">
								<view class="factory_box1">
									<view class="factoru_txbox">
										<image class="factoru_tx" src="../../static/images/ymy/A31/image_home.png">
										</image>
										<view class="factoru_txbox1">
											<view class="factoru_txbox2">
												<text class="factoru_name">走路的橘子</text>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
												<image class="factory_xx" src="../../static/icons/ymy/icon_xq_xx.png">
												</image>
											</view>
											<text class="factory_text1">金美孚1号 NS级</text>
										</view>
									</view>
									<view>技师和前天都很热情，店面干净整洁</view>
									<view class="factory_rq">2021/01/21</view>
									<view class="cleaning_zx"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switchBtnTab: 0,
				swiper: [{
						name: '蜗牛官方工场店',
						text: '保养服务洗车组合套餐阿杀菌剂啊啊',
						state: 1
					},
					{
						name: '蜗牛官方服务',
						text: '保养服务洗车组合套餐阿杀菌剂啊啊',
						state: 2
					}
				]
			}
		},
		methods: {
			switchCurve(index) {
				this.switchBtnTab = index
			},
		}
	}
</script>

<style>
	.cleaning_imgBox {
		display: block;
		width: 750rpx;
		background-color: #007AFF;
	}

	.cleaning_box {
		padding: 40rpx;
		width: 750rpx;
		height: 310rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(103, 103, 103, 0.16);
		border-radius: 20rpx;
		box-sizing: border-box;
		position: absolute;
		top: 370rpx;
	}

	.red {
		color: #f20808;
	}

	.cleaning_zx {
		width: 670rpx;
		height: 0rpx;
		border: solid 1rpx #dadada;
		margin: 10rpx 0;
	}

	.cleaning_bt {
		width: 308rpx;
		height: 60rpx;
		font-family: PingFang SC;
		font-size: 44rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: rgba(0, 0, 0, 1);
	}

	.cleaning_text2 {
		width: 40rpx;
		height: 28rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
		color: rgba(74, 74, 74, 1);
	}

	.cleaning_bq {
		width: 120rpx;
		border-radius: 4rpx;
		border: solid 2rpx #a5a5a5;
		height: 28rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 23rpx;
		letter-spacing: 0rpx;
		color: #444444;
		padding: 0 5rpx;
		text-align: center;
	}

	.cleaning_wz {
		display: flex;
		justify-content: space-between;
	}

	.cleaning_box5 {
		width: 80rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.factoru_qh {
		box-sizing: border-box;
		padding: 0rpx 40rpx;
		background-color: #FFFFFF;
		margin-top: 220rpx;
	}

	.factoru_qh2 {
		margin-top: 20rpx;
	}

	.factory_zx {
		width: 670rpx;
		height: 0rpx;
		border: solid 1rpx #dadada;
		margin: 10rpx 0;
	}

	.factory_bt {
		width: 546rpx;
		height: 56rpx;
		font-family: PingFang SC;
		font-size: 40rpx;
		font-weight: bold;
		font-stretch: normal;
		line-height: 56rpx;
		letter-spacing: 0rpx;
		color: #000000;
	}

	.text_fw {
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #5a5a5a;
		margin: 20rpx 0;
	}

	.factory_bq {
		width: 120rpx;
		height: 36rpx;
		border-radius: 4rpx;
		border: solid 2rpx #a5a5a5;
		width: 80rpx;
		height: 28rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
		color: #444444;
	}

	.factory_box2 {
		display: flex;
		justify-content: space-between;
	}

	.factory_box3 {
		display: flex;
	}

	.factoru_zx {
		width: 710rpx;
		height: 0rpx;
		border: solid 1rpx #cdcdcd;
		margin: 12rpx 0;
	}

	.factoru_text_bt {
		width: 168rpx;
		height: 40rpx;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: bold;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: #353535;
	}

	.factory_name {
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
		color: #3b3b3b;
	}

	.factory_text1 {
		font-family: PingFang SC;
		font-size: 18rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 26rpx;
		letter-spacing: 0rpx;
		color: #a5a5a5;
	}

	.factory_wz {
		display: flex;
		justify-content: space-between;
	}

	.factory_dz {
		display: flex;
		flex-wrap: wrap;
	}

	.factory_tb {
		width: 80rpx;
		height: 80rpx;
	}

	.factoru_bq2 {
		width: 142rpx;
		height: 42rpx;
		background-color: #efefef;
		border-radius: 24rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
		color: #f5610c;
	}

	.factory_xx {
		width: 20rpx;
		height: 20rpx;
	}

	.factoru_tx {
		width: 60rpx;
		height: 62rpx;
		background-color: #000000;
		border-radius: 50%;
	}

	.factoru_txbox {
		display: flex;
	}

	.factoru_txbox1 {
		margin-left: 10rpx;
	}

	.factoru_txbox2 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.factory_rq {
		font-family: PingFang SC;
		font-size: 18rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 26rpx;
		letter-spacing: 0rpx;
		color: #b3b3b3;
	}

	.iten {
		height: 42rpx;
		background-color: #efefef;
		border-radius: 24rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3rpx;
		letter-spacing: 0rpx;
		color: #929292;
		padding: 20rpx 30rpx;
		margin: 16rpx 30rpx 38rpx 0;
	}

	.item {
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.buttonActive {
		color: #f5610c;
	}

	.commets_swiper {
		background-color: #FFFFFF;
		height: 100vh;
	}

	.commets_bt {
		margin: 20rpx 0 0 30rpx;
	}

	.commets_img {
		width: 120rpx;
		height: 120rpx;
		background-color: #000000;
	}

	.commets_text_box {
		display: flex;
		margin: 30rpx 30rpx 10rpx 30rpx;
	}

	.commets_text {
		line-height: 30rpx;
		margin: 0 30rpx;
	}

	.commets_spm {
		margin-top: 30rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
	}

	.title-view {
		display: flex;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.text-view {
		flex-grow: 1;
		line-height: 80rpx;
		text-align: center;
	}

	.active {
		border-bottom: 5rpx solid #5992BD;
	}

	.commets_pj {
		height: 45rpx;
		text-align: right;
		margin-right: 30rpx;
		line-height: 45rpx;
	}

	.commets_text_pj {
		width: 140rpx;
		height: 48rpx;
		padding: 5rpx 35rpx;
		line-height: 40rpx;
		color: #f5610c;
		border: 1rpx solid #f5610c;
		border-radius: 24rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
	}

	.box_fooder {
		height: 100%;
	}

	.foder_box {
		height: 100%;
		background-color: #FFFFFF;
	}

	.box_img {
		display: flex;
		align-items: center;
	}
</style>
